
<html lang='en'><head><meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<head>
<title>Lightbox Demo page</title>
<link href='css/styleslite.css' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="http://knowitfrom2.googlecode.com/svn/trunk/css/orangebox.css" type="text/css" media="screen" />
<link rel="stylesheet" http://knowitfrom2.googlecode.com/svn/trunk/css/styles.css" type="text/css" media="screen" /> 
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="http://knowitfrom2.googlecode.com/svn/trunk/js/orangebox.js"></script>  
</head>
<body>
<div id='wrap-1'>
		<div id='content-wrapper'>
<div id='header'><h2>Demo for Orange Lightbox</h2></div>
		<table class='demotab' cellspacing="10"> <h3>for grouped images</h3>  
			<tr><td><a data-ob_caption="This is the caption" data-ob_link="http://www.flickr.com/photos/cubagallery" data-ob_linktext="CubaGallery" href="http://farm6.static.flickr.com/5086/5264590517_6bb0f9bbfb_z.jpg" rel="lightbox[image]" title="Nature"><img border="0" src="http://farm6.static.flickr.com/5086/5264590517_6bb0f9bbfb_z.jpg" /></a><br /></td><td><a data-ob_caption="This is the caption" data-ob_link="http://www.flickr.com/photos/21644167@N04/" data-ob_linktext="Bahman Farzad" href="http://farm5.static.flickr.com/4126/4982660063_b2bd6c95db_z.jpg" rel="lightbox[image]" title="Nelumbo Nucifera"><img border="0" src="http://farm5.static.flickr.com/4126/4982660063_b2bd6c95db_z.jpg" /></a> 
 </td><td><a data-ob_caption="This is the caption" data-ob_link="http://www.flickr.com/photos/sus_muris/" data-ob_linktext="Blinde 8" href="http://farm6.static.flickr.com/5144/5649479455_a0a3397973_b.jpg" rel="lightbox[image]" title="Privileged"><img border="0" src="http://farm6.static.flickr.com/5144/5649479455_a0a3397973_b.jpg" /></a> </td></tr>
		</table>
<table class='demotab'> <h3>for Single images</h3>  
<tr><td><a data-ob_caption="This is the caption" data-ob_link="http://www.flickr.com/photos/cubagallery" data-ob_linktext="CubaGallery" href="http://farm6.static.flickr.com/5086/5264590517_6bb0f9bbfb_z.jpg" rel="lightbox[image]" title="Nature"><img border="0" src="http://farm6.static.flickr.com/5086/5264590517_6bb0f9bbfb_z.jpg" /></a><br /></td>
</tr></table>

<table class='demotab'> <h3>for videos from video sharing sites</h3> 
<tr>
<td><a href="http://trailers.apple.com/movies/disney/piratesofthecaribbeanonstrangertides/pirates-tlr2_480p.mov?width=844&amp;height=380" rel="lightbox" title="Pirates of the Caribbean: On Stranger Tides">QuickTime Video</a></td><td><a href="http://vimeo.com/9856705" rel="lightbox" title="TRI?NGLE">Vimeo Video</a></td><td><a href="http://www.viddler.com/player/d6c37b62" rel="lightbox" title="Viddler">Viddler Video (coming in 2.0.4)</a></td><td><a href="http://www.youtube.com/watch?v=AZMSAzZ76EU&amp;width=640&amp;height=390" rel="lightbox" title="Portal 2 Launch TV Ad">YouTube Video</a></td>
</tr>
</table>
<table class='demotab'> <h3>for Inline</h3>
<tr><td><a href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&amp;postID=7077561827483306001&amp;from=pencil#features" rel="lightbox[inline]" title="features">Inline Content</a></td></tr>
</table> 
<table class='demotab'> <h3>for flash files</h3>
<tr><td><a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?width=720&amp;height=460" rel="lightbox[Flash]" title="Flash">SWF File</a> </td></tr>
</table>
<table class='demotab'> <h3>for IFrame</h3>
<tr><td><a href="http://mugtug.com/sketchpad/?iframe" rel="lightbox[iframe]" title="Canvas">canvas</a></td><td><a href="http://www.google.com/?iframe" rel="lightbox[iframe]" title="iFrame">iframe</a></td></tr>
</table>
<table class='demotab'> <h3>for Mixed contents [image+youtube+vimeo]</h3>
<tr><td><a href="http://www.blogger.com/ob_hidden_set" rel="lightbox[hidden]">Content Set (image, vimeo, youtube)</a> <br />
<ul id="ob_gallery" style="display: none;"><li class="hidden" data-ob_caption="This is the caption" data-ob_link="http://www.flickr.com/photos/maxdicapua/" data-ob_linktext="Max Di Capua" id="http://farm6.static.flickr.com/5302/5659078754_e27dfc611f_z.jpg" title="Green Green Grass"></li>
<li class="hidden" id="http://vimeo.com/9856705" title="Nokta"></li>
<li class="hidden" id="http://www.youtube.com/watch?v=AZMSAzZ76EU&amp;width=640&amp;height=390" title="Aperture Investment Opportunity #2: &quot;Bot Trust&quot;"></li>
</ul><div id="features" style="display: none;"><ul class="list"><li>Displays Wide Range of Content<br />
<ul><li>jpg, png, gif, bmp</li>
<li>Inline HTML</li>
<li>iFrames</li>
<li>swf, mov, mp4, m4v</li>
<li>Vimeo &amp; YouTube Movies</li>
</ul></li>
<li>Content Sets with Navigation</li>
<li>Hidden Content Sets</li>
<li>Keyboard Navigation</li>
<li>Image Preloading</li>
<li>Internal Links</li>
<li>Image and Movie Scaling</li>
<li>Customizable jQuery and CSS</li>
<li>Cross-Browser Compatible</li>
<li>Mobile Browser &amp; iPad Ready</li>
<li>Fast and Lightweight</li>
</ul>To see some of the customizations at work, use the options menu on the main page.<br />
Other customizations CSS styles, borders, positioning, opacity, min/max width/height etc. You can find a full list in the <a href="http://www.blogger.com/api.html" title="api">API documentation</a></td></tr>
</table>
			<div>
			</div>
		</div>
</div>
</body>
</html>